[feat] 업장 대표 이미지 캐러셀 UI 구현 및 API 연동#57
Conversation
|
The latest updates on your projects. Learn more about Vercel for GitHub.
|
|
Warning Review limit reached
More reviews will be available in 46 minutes and 47 seconds. Learn how PR review limits work. Your organization has used up its prepaid credits, and credit purchases are no longer available. Enable the review add-on in the billing tab to keep reviews running — you're only billed for reviews past your plan's rate limits ($0.25/file). ⌛ How to resolve this issue?After more reviews become available, a review can be triggered using the To avoid repeated limits, reduce automatic review volume by pausing incremental auto-reviews earlier, using label-based review opt-in, excluding WIP or generated PR titles, or requesting reviews manually when the PR is ready. If your team needs uninterrupted high-volume reviews, an organization admin can enable usage-based credits. 🚦 How do rate limits work?CodeRabbit enforces per-developer PR review limits for each organization. Most developers receive the normal plan review availability. For paid Pro and Pro+ PR reviews, CodeRabbit uses adaptive limits for sustained high-volume activity. When a developer's recent PR review activity reaches the 95th percentile or higher among CodeRabbit users, additional reviews become available more gradually as earlier reviews age out of the rolling window. Please see our Fair Usage Limits Policy for further information. ℹ️ Review info⚙️ Run configurationConfiguration used: Path: .coderabbit.yaml Review profile: CHILL Plan: Pro Run ID: 📒 Files selected for processing (14)
📝 WalkthroughWalkthrough업장 대표 이미지를 조회·편집·저장하는 매니저 흐름이 추가되었습니다. 공유 경로, 쿼리키, 업로드 타입과 API/훅을 확장하고, 편집 뷰모델·캐러셀·편집 페이지를 구현한 뒤 홈 배너와 라우팅에 연결했습니다. Changes업장 대표 이미지 기능 추가
Estimated code review effort🎯 4 (Complex) | ⏱️ ~60 minutes Possibly related PRs
Suggested reviewers
🚥 Pre-merge checks | ✅ 4 | ❌ 1❌ Failed checks (1 warning)
✅ Passed checks (4 passed)
✨ Finishing Touches🧪 Generate unit tests (beta)
Thanks for using CodeRabbit! It's free for OSS, and your support helps us grow. If you like it, consider giving us a shout-out. Comment |
There was a problem hiding this comment.
Actionable comments posted: 1
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Inline comments:
In `@src/pages/manager/workspace-image-edit/index.tsx`:
- Around line 136-140: The representative image in the workspace image editor is
currently treated as decorative because the <img> inside the workspace image
tile uses an empty alt. Update the image in the workspace-image-edit component
so each tile gets meaningful index-based alt text (for example, identifying its
position or order) rather than an empty string, using the existing image
rendering logic around image.url.
🪄 Autofix (Beta)
Fix all unresolved CodeRabbit comments on this PR:
- Push a commit to this branch (recommended)
- Create a new PR with the fixes
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 8fd1bbc3-95cc-4c64-a9c6-015e674eded6
📒 Files selected for processing (14)
src/app/App.tsxsrc/features/manager/workspace-image/api/workspaceImage.tssrc/features/manager/workspace-image/constants/workspaceImage.tssrc/features/manager/workspace-image/hooks/useUpdateWorkspaceImagesMutation.tssrc/features/manager/workspace-image/hooks/useWorkspaceImageEditViewModel.tssrc/features/manager/workspace-image/hooks/useWorkspaceImagesQuery.tssrc/features/manager/workspace-image/index.tssrc/features/manager/workspace-image/types/workspaceImage.tssrc/features/manager/workspace-image/ui/WorkspaceImageCarousel.tsxsrc/pages/manager/home/index.tsxsrc/pages/manager/workspace-image-edit/index.tsxsrc/shared/api/appFileUpload.tssrc/shared/constants/routes.tssrc/shared/lib/queryKeys.ts
There was a problem hiding this comment.
요거 성능 최적화만 하면 좋을거 같아요. 어차피 모달 닫혀있으면 렌더링이 안되는 구조라서 호출부(manager/home/index.tsx)에서 조건부 렌더링(isOpen && <WorkspaceImageCarousel ... />)을 적용하면 내부에서 wasOpen 같은 상태처리 안해도 될거 같네여?
따봉 |
There was a problem hiding this comment.
Caution
Some comments are outside the diff and can’t be posted inline due to platform limitations.
⚠️ Outside diff range comments (1)
src/features/manager/workspace-image/ui/WorkspaceImageCarousel.tsx (1)
32-50: 🩺 Stability & Availability | 🟠 Major | ⚡ Quick win이미지가 0개가 되면 모달이 “닫히지” 않고 전역 부작용만 남습니다.
total === 0가드가useEffect뒤에 있어서, 열려 있는 동안images가 빈 배열로 바뀌면 스크롤 락과keydown리스너가 유지된 채 컴포넌트만null을 반환합니다. 지금 구조에서는 보이지 않는 모달 때문에 페이지 스크롤이 막힌 상태가 남을 수 있습니다.total === 0일 때는 전역 부작용을 걸지 말고 바로onClose()로 닫는 쪽이 안전합니다.수정 예시
useEffect(() => { + if (total === 0) { + onClose() + return + } + const previousOverflow = document.body.style.overflow document.body.style.overflow = 'hidden' const handleKeyDown = (event: KeyboardEvent) => { if (event.key === 'Escape') onClose() if (event.key === 'ArrowLeft') goPrev() if (event.key === 'ArrowRight') goNext() } window.addEventListener('keydown', handleKeyDown) return () => { document.body.style.overflow = previousOverflow window.removeEventListener('keydown', handleKeyDown) } - }, [onClose, goPrev, goNext]) + }, [total, onClose, goPrev, goNext]) if (total === 0) return null🤖 Prompt for AI Agents
Verify each finding against current code. Fix only still-valid issues, skip the rest with a brief reason, keep changes minimal, and validate. In `@src/features/manager/workspace-image/ui/WorkspaceImageCarousel.tsx` around lines 32 - 50, The WorkspaceImageCarousel modal can return null when total becomes 0, but the useEffect still applies body scroll lock and the keydown listener, leaving global side effects behind. Move the empty-state handling so that when total === 0 the component closes via onClose() immediately and does not install the effect, or guard the effect itself to skip setup in that case. Use the WorkspaceImageCarousel component, the total check, and the existing onClose/goPrev/goNext handlers to ensure the modal fully cleans up when the image list becomes empty.
🤖 Prompt for all review comments with AI agents
Verify each finding against current code. Fix only still-valid issues, skip the
rest with a brief reason, keep changes minimal, and validate.
Outside diff comments:
In `@src/features/manager/workspace-image/ui/WorkspaceImageCarousel.tsx`:
- Around line 32-50: The WorkspaceImageCarousel modal can return null when total
becomes 0, but the useEffect still applies body scroll lock and the keydown
listener, leaving global side effects behind. Move the empty-state handling so
that when total === 0 the component closes via onClose() immediately and does
not install the effect, or guard the effect itself to skip setup in that case.
Use the WorkspaceImageCarousel component, the total check, and the existing
onClose/goPrev/goNext handlers to ensure the modal fully cleans up when the
image list becomes empty.
ℹ️ Review info
⚙️ Run configuration
Configuration used: Path: .coderabbit.yaml
Review profile: CHILL
Plan: Pro
Run ID: 8685f62b-a2ff-4c4e-9df1-29cfb9e50b40
📒 Files selected for processing (2)
src/features/manager/workspace-image/ui/WorkspaceImageCarousel.tsxsrc/pages/manager/home/index.tsx
🚧 Files skipped from review as they are similar to previous changes (1)
- src/pages/manager/home/index.tsx
- useWorkspaceImagesQuery에서 refetch 노출 - useWorkspaceImageEditViewModel에서 조회 성공 시에만 초기화하도록 가드 강화 (실패 시 빈 목록으로 잠겨 전체 교체 저장으로 이미지 삭제되는 경로 제거) - 편집 페이지에 load-error 상태 추가: 에러 UI + 다시 시도 버튼 + 저장 비활성 - isLoadError 파생값으로 초기 로드 실패 상태 구분 - totalCount 중복 상태 제거, items.length 사용 - Spinner 추가, close/plus 아이콘 인라인 SVG로 교체
- safeIndex = Math.min(index, total-1)로 단일 클램프값 도입 (active 이미지, 카운터, 썸네일 하이라이트, 점 인디케이터 4곳 통일) - 이미지 길이 변경 시에도 UI 동기화 보장 - text-[18px] → text-5, text-[22px] → text-7 토큰 적용 - 유니코드 글리프(‹/›) → ChevronLeft/RightIcon SVG 컴포넌트 사용 - close(✕)/edit(✎) 글리프 → 인라인 currentColor SVG로 교체
ID
변경 내용
구현 사항
새로운 기능 모듈 추가 (
src/features/manager/workspace-image/)workspaceImage.ts- 이미지 조회/업데이트 API 호출 로직useWorkspaceImagesQuery- 업장 이미지 목록 조회useUpdateWorkspaceImagesMutation- 이미지 수정 API 호출useWorkspaceImageEditViewModel- 이미지 편집 화면 ViewModel (상태 관리)WorkspaceImageCarousel- 모달 형태의 이미지 캐러셀 뷰어이미지 편집 페이지 추가 (
src/pages/manager/workspace-image-edit/)기존 코드 수정
WORKSPACE_IMAGES_EDIT_PATTERN라우트 및 빌더 함수 추가WORKSPACE_REPRESENTATIVE_IMAGE파일 업로드 타입 추가참고 사항
시연
2026-06-24.8.46.10.mov
Summary by CodeRabbit
New Features
Bug Fixes
Chores